<template>
<div class="page">
  <div id="wait">
  <app-scroll class="content">
    <div class="good">
      <h1>近期最受期待</h1>
      <app-scroll :scrollX="true" :scrollY="false" :width="wrapWidth">
        <div class="good-list" ref="wrap">
          <div class="list" v-for="item in wait" :key="item.id">
            <img :src="(item.img+'@1l_1e_1c_128w_180h').replace('/w.h','')" alt="">
            <span>{{item.wish}}人想看</span>
            <p>{{item.nm}}</p>
            <h3>{{item.comingTitle}}</h3>
          </div>
        </div>
      </app-scroll>
    </div>
    <div class="hot">
      <ul class="list">
        <li class="hot-list" v-for="item in waiting" :key="item.id" >
          <div class="imge" >
            <img :src="(item.img+'@1l_1e_1c_128w_180h').replace('/w.h','')" alt="">
          </div>
          <div class="title">
            <h1>{{item.nm}}</h1>
            <h5 v-if="item.version!==''">{{item.version}}</h5>
            <div class="pingfen">
              <p v-if="item.globalReleased"><span>观众评分</span>{{item.sc}}</p>
              <p v-else>{{item.wish}}<span>人想看</span></p>
            </div>
            <h3>{{item.star}}</h3>
            <h4>{{item.showInfo}}</h4>
          </div>
          <div class="caozuo">
            <h1 v-if="item.globalReleased">购票</h1>
            <h1 v-else>预售</h1>
          </div>
        </li>
      </ul>
    </div>
  </app-scroll>
  </div>
  <router-view></router-view>
</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data(){
    return{
      wrapWidth:0,
    }
  },
  watch:{
    wait(){
      this.$nextTick(()=>{
         this.wrapWidth=this.$refs.wrap.offsetWidth;
         console.log(this.waiting);
         console.log(this.wrapWidth);
      })
    }
  },
   mounted() {
      // this.wrapWidth = this.$refs.wrap.offsetWidth;
      
  },
  computed:{
    ...mapState({
      wait:state=>state.wait.wait,
      waiting:state=>state.wait.waiting
    })
  },
  created(){
    this.$store.dispatch('wait/requestWaitList')
    this.$store.dispatch('wait/requestWaitingList')
  }
}
</script>

<style lang="scss" scoped>
.page{
  width: 100%;
  height: calc(100% - 144px) !important;
}
#wait{
  background-color: #ccc;
  width: 100%;
  height: 100%;
}
.content{
  width: 100%;
  height: 100%;
}
.good{
  height: 200px;
  background-color: #ffffff;
  padding: 10px;
  box-sizing: border-box;
  h1{
    color: #333333;
    font-size: 14px;
    height: 19px;
    width: 100%;
  }
  .good-list{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: max-content;
    height: 161px;
    padding: 0 6px;
    box-sizing: border-box;
    // width: 343px;
    .list{
      position: relative;
      margin-right: 10px;
      img{
        width: 85px;
        height: 115px;
      }
      span{
        position: absolute;
        bottom: 50px;
        left: 0;
        color: #faaf00;
        font-size: 12px;
        font-weight: bold;
        display: flex;
        flex-wrap: nowrap;
      }
      p{
        width: 85px;
        height: 17px;
        font-size: 13px;
        margin: 10px 0 3px;
        color: #222222;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      h3{
        width: 85px;
        height: 16px;
        color: #999999;
        font-size: 12px;
      }
    }
  }
}
 .hot{
  margin-top: 10px;
  background-color: #fff;
}

.hot-list{
  display: flex;
  // justify-content: space-around;
  align-items: center;
  height: 114px;
  padding: 12px 14px 12px 15px;
  box-sizing: border-box;
  .title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    position: relative;
    h1{
      color: #333333;
      font-size: 17px;
      padding: 0 5px 0 0;
    }
    h5{
      position: absolute;
      top: -5px;
      left: 100px;
      width: 60px;
      background-color:blue;
      height: 14px;
      margin: 5px 3px 0 0;
    }
    .pingfen p{
      color: #faaf00;
      font-size: 15px;
    }
    .pingfen span{
      color: #666666;
      font-size: 13px;
    }
    h3{
      width: 202px;
      height: 15px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color:#666;
      font-size: 13px;
      margin: 6px 0 0;
    }
    h4{
      width: 202px;
      height: 15px;
      color: #666;
      font-size: 13px;
      margin: 6px 0 0;
    }
    
  }
  .caozuo{
      width: 47px;
      height: 27px;
      background-color: #f03d37;
      box-sizing: border-box;
      padding: 6px 10px;
      h1{
        color: #fff;
        width: 24px;
        height: 16px;
        font-size: 12px;
      }
  }
  .imge{
      img{

      width: 64px;
    height: 90px;
      }
    }
}
</style>